<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义，强扩展性。
		</demo-desc>
		
		<fu-section title="基础案例" customClass="fu-m-t-20" type="line">
			<fu-button @click="onClick('top')">顶部弹出</fu-button>
			<fu-button margin="10px 0 0" @click="onClick('right')">右侧弹出</fu-button>
			<fu-button margin="10px 0 0" @click="onClick('bottom')">底部弹出</fu-button>
			<fu-button margin="10px 0 0" @click="onClick('left')">左侧弹出</fu-button>
			<fu-button margin="10px 0 0" @click="onClick('center')">居中弹出</fu-button>
			<fu-button margin="10px 0 0" @click="onClick('center', 'radius')">显示圆角</fu-button>
			<fu-button margin="10px 0 0" @click="onClick('bottom', 'isMaskClick')">禁止点击遮罩层关闭</fu-button>
			<fu-button margin="10px 0 0" @click="onClick('center', 'showClose')">显示关闭按钮</fu-button>
		</fu-section>
		
		<fu-popup ref="popupRef" bgColor="#ffffff" :showClose="showClose" :isMaskClick="isMaskClick" :radius="radius">
			<view class="popup-back fu-relative" v-if="state == 'top' || state == 'bottom'">
				<fu-button @click="close">点我关闭</fu-button>
			</view>
			<view class="fu-w-375 popup-back" v-if="state == 'left' || state == 'right'">
				<fu-button @click="close">点我关闭</fu-button>
			</view>
			<view class="fu-w-500 popup-back fu-b-r-10" v-if="state == 'center'">
				<fu-button @click="close">点我关闭</fu-button>
			</view>
		</fu-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	// data数据
	const popupRef = ref();
	let isMaskClick = ref(true);
	let showClose = ref(false);
	let state = ref();
	let radius = ref();
	
	// methods方法
	const onClick = (e, k) => {
		isMaskClick.value = k === 'isMaskClick'? false: true;
		showClose.value = k === 'showClose'? true: false;
		radius.value = k === 'radius'? 10: 0;
		state.value = e;
		popupRef.value.open(e)
	};
	
	const close = () => {
		popupRef.value.close()
	};
</script>

<style lang="scss" scoped>
	.popup-back {
		height: 200px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>